<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <!-- <p>count 值：{{ $store.state.count }}</p> -->
    <p>count 值：{{ count }}</p>
    <!-- <p>money 值：{{ $store.state.money }}</p> -->
    <p>money 值：{{ money }}</p>
    <button class="btn btn-primary">+1</button>
  </div>
</template>

<script>

// vue也看穿了你的懒惰，提供了一个辅助函数叫 mapState
// 用法：先导入  再用语法： ...mapState(['数据名','数据名2'])
import { mapState } from 'vuex'
export default {
  name: 'Left',

  // 使用计算属性简化
  computed: {
    // count () {
    //   return this.$store.state.count
    // },
    // money () {
    //   return this.$store.state.money
    // }

    // 你下面这句话，他相当于帮你生成了上面两句计算属性
    ...mapState(['count', 'money'])
  }
}
</script>

<style>
</style>
